<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box1 {
				width: 300px;
				height: 200px;
				margin: 100px auto;
			}
			
			table {
				border-collapse: collapse;
				border-spacing:0;
				border:1px solid #C0C0C0;
				width: 300px;
				height: 200px;
				margin: 0 auto;
			}
			
			tbody {
				background-color: #f0f0f0;
			}
			
			td {
				border: 1px solid #d0d0d0;
			}
			
			th {
				height: 40px;
				background-color: #0099cc;
				color: #ffffff;
			}
			
			tbody tr:hover{
				cursor:pointer;
				background-color: #fafafa;
			}
		</style>
		<script>
			window.onload = function() {
				var topInp = document.getElementById("theadInp");
				var tbody = document.getElementById("tbody");
				var Arr = tbody.getElementsByTagName("input");
				topInp.onclick = function() {
						//点击上面影响下面
						for (var i = 0; i < Arr.length; i++) {
							Arr[i].checked = topInp.checked;
						}
					}
					//下面点击影响上面
					for (var i = 0; i < Arr.length; i++) {
					Arr[i].onclick = function() {
						var bool = true;
						for (var j = 0; j < Arr.length; j++) {
							if (Arr[j].checked == false) {
								bool = false;
							}
						}
						topInp.checked = bool;
					}
				}
			}
		</script>

	</head>

	<body>
		<div class="box1">
			<table>
				<thead>
					<tr>
						<th> <input type="checkbox" id="theadInp"></th>
						<th>菜名</th>
						<th>饭店</th>

					</tr>
				</thead>
				<tbody id="tbody">
					<tr>
						<td><input type="checkbox"></td>
						<td>地三鲜</td>
						<td>田老师</td>

					</tr>
					<tr>
						<td><input type="checkbox"></td>
						<td>西红柿鸡蛋</td>
						<td>田老师</td>

					</tr>
					<tr>
						<td><input type="checkbox"></td>
						<td>酸溜土豆丝</td>
						<td>田老师</td>

					</tr>
					<tr>
						<td><input type="checkbox"></td>
						<td>萝卜干</td>
						<td>田老师</td>

					</tr>
				</tbody>
			</table>
		</div>
	</body>

</html>